<template>
  <div class="container">
    <el-card class="box-card">
      <div class="btn">
        <el-button type="success">
          <i class="el-icon-edit"></i>
          <span @click="addquestion">新增试题</span>
        </el-button>
      </div>

      <el-form
        :inline="true"
        class="demo-form-inline"
        :model="formData"
        ref="formData"
      >
        <el-row >
          <el-col :span="12">
            <el-form-item label="学科">
              <el-select
                placeholder="请选择"
                v-model="formData.subjectID"
                @change="changesubjec"
              >
                <el-option
                  :label="item.label"
                  :value="item.value"
                  v-for="item in subject"
                  :key="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="二级目录">
              <el-select placeholder="请选择" v-model="formData.catalogID">
                <el-option
                  :label="item.label"
                  :value="item.id"
                  v-for="item in catalogue"
                  :key="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12"
            ><el-form-item label="标签">
              <el-select placeholder="请选择" v-model="formData.tags">
                <el-option
                  :label="item.tagName"
                  value="shanghai"
                  v-for="item in tagslist"
                  :key="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="关键字">
              <el-input v-model="formData.keyword"></el-input> </el-form-item
          ></el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="试题类型">
              <el-select placeholder="请选择" v-model="formData.questionType">
                <el-option
                  :label="item.label"
                  :value="item.value"
                  v-for="item in questionTypes"
                  :key="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="难度">
              <el-select placeholder="请选择" v-model="formData.difficulty">
                <el-option
                  :label="item.label"
                  :value="item.value"
                  v-for="item in difficultys"
                  :key="item.value"
                ></el-option>
              </el-select> </el-form-item
          ></el-col>
          <el-col :span="12">
            <el-form-item label="方向">
              <el-select placeholder="请选择" v-model="formData.direction">
                <el-option
                  :label="item"
                  :value="item"
                  v-for="item in direction"
                  :key="item"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="录入人">
              <el-select placeholder="请选择" v-model="formData.creatorID">
                <el-option
                  :label="item.username"
                  :value="item.id"
                  v-for="item in userlist"
                  :key="item.id"
                ></el-option>
              </el-select> </el-form-item
          ></el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="题目备注">
              <el-input v-model="formData.remarks"></el-input>
            </el-form-item>
            <el-form-item label="企业简称">
              <el-input v-model="formData.shortName"></el-input> </el-form-item
          ></el-col>
          <el-col :span="12">
            <el-form-item label="城市">
              <el-select
                placeholder="请选择"
                class="select"
                v-model="formData.province"
                @change="changecity"
              >
                <el-option
                  :label="item"
                  :value="item"
                  v-for="item in provinces"
                  :key="item"
                ></el-option>
              </el-select>
              <el-select
                placeholder="请选择"
                class="select"
                v-model="formData.city"
              >
                <el-option
                  :label="item"
                  :value="item"
                  v-for="item in countycitys"
                  :key="item"
                ></el-option>
              </el-select>
            </el-form-item>
            <div class="btn1">
              <el-button @click="cleanbtn">清除</el-button>
              <el-button type="primary" @click="Searchquestion">搜索</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
  <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
    <el-tab-pane label="全部" name="first"></el-tab-pane>
    <el-tab-pane label="待审核" name="second"></el-tab-pane>
    <el-tab-pane label="已审核" name="third"></el-tab-pane>
    <el-tab-pane label="已拒绝" name="fourth"></el-tab-pane>
  </el-tabs>
        <el-alert type="info" class="el-icon-info" >数据一共{{total}}条</el-alert>

      <el-table :data="tableData" style="width: 100%" max-height="250">
        <el-table-column fixed prop="number" label="试题编号" width="150">
        </el-table-column>
        <el-table-column prop="subject" label="学科" width="100">
        </el-table-column>
        <el-table-column prop="catalog" label="目录" width="100">
        </el-table-column>
        <el-table-column
          prop="questionType"
          label="题型"
          width="100"
          :formatter="formatter"
        >
        </el-table-column>
        <el-table-column prop="question" label="题干" width="280">
        </el-table-column>
        <el-table-column  label="录入时间" width="120">
          <template slot-scope="scope">
         <span>{{(scope.row.chkDate)|formatTime}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="difficulty"
          label="难度"
          width="120"
          :formatter="formattertde"
        >
        </el-table-column>
        <el-table-column prop="chkUser" label="录入人" width="120">
        </el-table-column>
        <el-table-column
          prop="chkState"
          label="审核状态"
          width="120"
          :formatter="formattertype"
        >
        </el-table-column>
        <el-table-column prop="chkRemarks" label="审核意见" width="120">
        </el-table-column>
        <el-table-column prop="chkUser" label="审核人" width="120">
        </el-table-column>
        <el-table-column
          prop="publishState"
          label="发布状态"
          width="120"
          :formatter="publishType"
        >
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="200">
          <template slot-scope="scope">
            <el-button @click="preview(scope.row.id)" type="text" size="small">
              预览
            </el-button>
            <!-- :disabled="scope.row.chkState===2" -->
            <el-button @click="examine(scope.row.id)"
            :disabled="scope.row.chkState === 0 ? false : true"
            type="text" size="small" >
              审核
            </el-button>
            <el-button type="text" size="small" @click="modify(scope.row.id)" :disabled="scope.row.publishState===0"> 修改 </el-button>
            <el-button type="text" size="small" @click="Questionshelf(scope.row.id,scope.row.publishState)"> {{scope.row.publishState===1?'上架':'下架'}} </el-button>
            <el-button type="text" size="small" :disabled="scope.row.publishState===0" @click="delque(scope.row.id)"> 移除 </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="page">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-size="pagesize"
          :page-sizes="[5, 10, 15, 20]"
          layout=" sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
      <!-- //预览弹框 -->
      <el-dialog title="预览" :visible.sync="dialogVisible" width="50%">
        <preview :id="id" @close="closefn" v-if="dialogVisible" />
      </el-dialog>
    </el-card>
    <!-- 审核弹框 -->
    <el-dialog
      title="审核"
      :visible.sync="dialog"
      width="50%"
      v-if="dialog"
    >
      <el-radio v-model.number="chkStateRadio" :label="1">通过</el-radio>
      <el-radio v-model.number="chkStateRadio" :label="2">拒绝</el-radio>
      <el-input
        type="textarea"
        :rows="2"
        placeholder="请输入审核意见"
        v-model="chkRemarks"
      >
      </el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialog = false">取 消</el-button>
        <el-button type="primary" @click="review"
          >确 定</el-button
        >
      </span>
    </el-dialog>

  </div>
</template>

<script>
import { simple } from '@/api/hmmm/subjects'
import { simple as simplelist } from '@/api/hmmm/directorys'
import { list as labellist } from '@/api/hmmm/tags'
import {
  difficulty,
  questionType,
  direction,
  chkType,
  publishType
} from '@/api/hmmm/constants'
import { simple as usersimple } from '@/api/base/users'
import { provinces, citys } from '@/api/hmmm/citys'
import { choice, choiceCheck, choicePublish, remove } from '@/api/hmmm/questions'
import preview from '../components/preview'
import dayjs from 'dayjs'
export default {
  name: 'questionschoice',
  filters: {
    formatTime (time) {
      return dayjs(time).format('YYYY-MM-DD hh:mm:ss')
    }
  },
  data () {
    return {
      Questiondialog: false, //
      chkStateRadio: null,
      chkRemarks: '', // 文本域内容
      disabled: false,

      dialog: false, // 审核弹框显示
      dialogVisible: false, // 点击显示弹框
      formData: {
        subjectID: '', // 学科名称
        catalogID: '', // 二级目录名称
        tags: '', // 标签名称
        difficulty: '', // 难度名称
        questionType: '', // 试题类型名称
        direction: '', // 方向名称
        creatorID: '', // 录入人姓名
        province: '', // 一级城市名字
        city: '', // 二级城市名字
        shortName: '', // 企业简称
        remarks: '', // 题目备注
        keyword: '' // 关键字
      },
      pagesize: 10, // 页尺寸
      tableData: [],
      subject: [], // 学科列表
      activeName: 'first',
      page: 1, // 当前页数
      catalogue: [],
      tagslist: [], // 标签列表
      difficultys: difficulty, // 试题难度列表
      questionTypes: questionType, // 试题类型列表
      direction, // 就业方向
      userlist: [], // 录入人列表
      provinces: [], // 一级城市
      countycitys: [], // 二级城市列表
      // chkState: chkType, // 审核状态
      total: 0, // 总条数
      id: null,
      myid: 0,
      shelfid: 0, // 上架id
      publishState: 0// 判断上下架

    }
  },

  components: {
    preview
  },
  created () {
    this.subjectList()
    this.usersimple()
    this.provinceslist()
    this.choiceList()
  },
  methods: {
    // 搜索题库根据学科和关键字
    async Searchquestion () {
      const res = await choice({ subjectID: this.formData.subjectID, keyword: this.formData.keyword })
      this.tableData = res.data.items
    },
    // 删除题库
    async  delque (id) {
      const confirmres = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (confirmres === 'cancel') return this.$message('取消删除')
      await remove({ id })
      this.$message.success('删除成功')
      this.choiceList()
    },

    // 题库上下架
    async Questionshelf (id, pub) {
      this.publishState = pub === 0 ? pub = 1 : pub = 0
      const confirmres = await this.$confirm(`您确定${pub === 0 ? '上架' : '下架'}, 这道题目吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (confirmres === 'cancel') return

      await choicePublish({ id, publishState: this.publishState })

      this.$message.success('操作成功')
      this.choiceList()
      this.Questiondialog = false
    },
    // 点击修改跳转试题录入
    modify (id) {
      this.$router.push({ path: '/questions/new', query: { id: id, from: 'jx' } })
    },
    // 点击确定提交审核意见
    async review () {
      if (this.chkRemarks === '') return this.$message('审核意见不能为空')
      await choiceCheck({
        id: this.myid,
        chkState: this.chkStateRadio,
        chkRemarks: this.chkRemarks
      })

      this.$message.success('操作成功')
      this.dialog = false
      this.choiceList()
      this.chkRemarks = ''
    },
    // 审核功能
    examine (id) {
      this.dialog = true
      // console.log(id)
      this.myid = id
      // this.$message('请输入审核意见')
    },
    closefn () {
      this.dialogVisible = false
    },
    // 点击显示弹框
    preview (id) {
      // console.log(id)
      this.id = id
      this.dialogVisible = true
    },
    // 点击跳转新增试题
    addquestion () {
      this.$router.push('/questions/new')
    },
    publishType (row, column, cellValue, inde) {
      const obj = publishType.find((item) => item.value === Number(cellValue) + 2)
      return obj ? obj.label : '待发布'
    },
    formattertde (row, column, cellValue, inde) {
      const obj = difficulty.find((item) => item.value === Number(cellValue))
      return obj ? obj.label : '未知'
    },
    formattertype (row, column, cellValue, inde) {
      const obj = chkType.find((item) => item.value === Number(cellValue) + 1)
      return obj ? obj.label : '未知'
    },
    // 格式化数据
    formatter (row, column, cellValue, index) {
      const obj = questionType.find((item) => item.value === Number(cellValue))
      return obj ? obj.label : '未知'
    },
    // 点击清除
    cleanbtn () {
      this.$refs.formData.resetFields()
      this.formData = {
        subjectID: '', // 学科名称
        catalogID: '', // 二级目录名称
        tags: '', // 标签名称
        difficulty: '', // 难度名称
        questionType: '', // 试题类型名称
        direction: '', // 方向名称
        creatorID: '', // 录入人姓名
        province: '', // 一级城市名字
        city: '', // 二级城市名字
        shortName: '', // 企业简称
        remarks: '', // 题目备注
        keyword: '' // 关键字
      }
    },
    // 点击搜索获取精选列表
    async choiceList () {
      const res = await choice()
      console.log(res)
      this.tableData = res.data.items
      this.total = res.data.counts
    },

    // 获取二级城市
    async changecity (val) {
      const res = await citys(val)
      this.countycitys = res
    },
    // 获取一级城市
    async provinceslist () {
      const res = await provinces()
      // console.log(res)
      this.provinces = res
    },
    // 学科详情
    async changesubjec (id) {
      // console.log(id)
      const res = await simplelist({ subjectID: id })
      this.catalogue = res.data
      const resp = await labellist({ subjectID: id })
      this.tagslist = resp.data.items
      // console.log(resp)
    },
    // 学科列表
    async subjectList () {
      const res = await simple()
      // console.log(res)
      this.subject = res.data
    },
    async usersimple () {
      const res = await usersimple({ keyword: this.keyword })
      this.userlist = res.data
    },
    onSubmit () {
      console.log('submit!')
    },
    async handleClick (tab, event) {
      if (tab._props.label === '全部') {
        this.choiceList()
      } else if (tab._props.label === '待审核') {
        const res = await choice({ chkState: this.chkState = 0 })
        this.tableData = res.data.items
        this.total = res.data.counts
      } else if (tab._props.label === '已审核') {
        const res = await choice({ chkState: this.chkState = 1 })
        this.tableData = res.data.items
        this.total = res.data.counts
      } else if (tab._props.label === '已拒绝') {
        const res = await choice({ chkState: this.chkState = 2 })
        this.tableData = res.data.items
        this.total = res.data.counts
      }
    },
    // pageSize 改变时会触发
    handleSizeChange (key) {
      this.pagesize = key
      this.choiceList()
    },
    // currentPage 改变时会触发
    handleCurrentChange (val) {
      this.page = val
      this.choiceList()
    }
  }

}
</script>

<style scoped lang='scss'>

.container {

  .demo-form-inline {
    margin: 20px;
    .select {
      width: 100px;
    }
    .btn1 {
      display: inline-block;
      margin-left: 100px;
    }
  }
  padding: 10px 10px 0 10px;
  .box-card {
    padding: 20px;

    .btn {
      display: flex;
      justify-content: flex-end;
      .el-button--medium {
        span {
          font-size: 12px;
        }
        border-radius: 3px;
      }
    }
.el-icon-info{
color:orange
}
    .page {
      display: flex;
      justify-content: flex-end;
      margin-top: 20px;
    }
  }
}
.el-textarea {
  margin-top: 20px;
}
</style>
